<script setup lang="ts">
import { onUnmounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import Versions from './components/Versions.vue'

const name = ref<string>('client')
const ipcRenderer = window.electron.ipcRenderer
const onClickGrpcSayHelloBtn = (e) => {
  console.log('click', e)
  ipcRenderer.send('grpc-hello', { name: name.value })
  ipcRenderer.once('grpc-hello-reply', (_, recv: any) => {
    console.log(recv)
    message.success(recv.message)
  })
}

const timer = ref()

timer.value = setInterval(() => {
  ipcRenderer.send('udp-get-last-message', {})
}, 1000)

ipcRenderer.on('udp-get-last-message-reply', (_, recv: any) => {
  console.log('udp-get-last-message-reply', recv)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<template>
  <Versions></Versions>

  <svg class="hero-logo" viewBox="0 0 900 300">
    <use xlink:href="./assets/icons.svg#electron" />
  </svg>
  <h2 class="hero-text">You've successfully created an Electron project with Vue and TypeScript</h2>
  <p class="hero-tagline">Please try pressing <code>F12</code> to open the devTool</p>

  <div class="links">
    <div class="link-item">
      <a target="_blank" href="https://electron-vite.org">Documentation</a>
    </div>
    <div class="link-item link-dot">•</div>
    <div class="link-item">
      <a target="_blank" href="https://github.com/alex8088/electron-vite">Getting Help</a>
    </div>
    <div class="link-item link-dot">•</div>
    <div class="link-item">
      <a
        target="_blank"
        href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron"
      >
        create-electron
      </a>
    </div>
  </div>
  <div style="text-align: center">
    <a-space direction="vertical">
      <a-input v-model:value="name" placeholder="Input your name" />
      <a-button type="primary" @click="onClickGrpcSayHelloBtn">Grpc Say Hello</a-button>
    </a-space>
  </div>
</template>

<style lang="less">
@import './assets/css/styles.less';
</style>
